<template>
  <div class="box">
    <Header head_text="我的关注" />

    <div class="item" v-for="(item,index) in fllow" :key="item.id">
      <div class="images">
        <img v-if="item.head_img" :src="$axios.defaults.baseURL+ item.head_img" />
        <img v-else src="@/assets/logo.png" />
      </div>
      <div class="cent">
        <div class="nickname">{{item.nickname}}</div>
        <div class="date">{{item.create_date.split('T')[0]}}</div>
      </div>
      <div v-if="item.isfollow" class="but" @click="unsubscribe(item.id,index)">取消关注</div>
      <div v-else class="gubut" @click="bscribe(item.id,index)">关注</div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: {
    Header
  },
  data() {
    return {
      fllow: []
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user_follows"
        // method: "get"
      }).then(res => {
        //   console.log(res.data);
        const newData = res.data.data.map(user => {
          return { ...user, isfollow: true };
        });

        this.fllow = newData;
        console.log(newData);
      });
    },

    unsubscribe(id, index) {
      console.log(this.data);
      //   const id = this.fllow.id;
      this.$axios({
        url: "/user_unfollow/" + id
      }).then(res => {
        // console.log(res.data);
        this.$toast.fail("不要取消关注嘛。。。");
        // this.loadPage();
        this.fllow[index].isfollow = false;
      });
    },

    bscribe(id, index) {
      this.$axios({
        url: "/user_follows/" + id,
        method: "get"
      }).then(res => {
        console.log(res.data);
        this.fllow[index].isfollow = true;
        this.$toast.success("嘻嘻。谢谢关注！！");
      });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  .item {
    padding: 0 20px;
    margin-top: 20px;
    align-items: center;
    height: 70px;
    display: flex;
    border-bottom: 1px solid #aaaaaa;
    .images {
      img {
        height: 42px;
        width: 42px;
        border-radius: 20pxs;
      }
    }
    .cent {
      flex: 1;
      margin-left: 20px;
    }
    .but {
      background: hotpink;
      padding: 10px;
      border-radius: 17px;
      opacity: 0.6;
    }
    .gubut {
      background: fuchsia;
      padding: 20px;
      border-radius: 20px;
      opacity: 0.9;
    }
  }
}
</style>